import { View, Text, Map, Button, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState } from "react";
import { AtButton, AtMessage } from "taro-ui";
import { getLoginPhoneApi, getLoginApi } from "../../utils/api";

import "./index.scss";

const Welcome = () => {
  const [type, set_type] = useState(1);

  const getUserInfo = () => {
    Taro.getSetting({
      success: function(res) {
        if (res.authSetting["scope.userInfo"]) {
          Taro.getUserInfo({
            success: function(res2) {
              Taro.setStorage({
                key: "avatarUrl",
                data: res2.userInfo.avatarUrl
              });
              Taro.setStorage({
                key: "nickName",
                data: res2.userInfo.nickName
              });
            }
          });
        }
      }
    });
  };

  const fn = () => {
    Taro.login({
      success(res) {
        if (res.code) {
          getLoginApi({
            code: res.code
          }).then(res => {
            if (res.res === 5002) {
              set_type(2);
              Taro.setStorage({
                key: "phone_token",
                data: res.phone_token
              });
            } else if (res.res === 0) {
              Taro.setStorage({
                key: "access_token",
                data: res.access_token
              });
              Taro.setStorage({
                key: "user_id",
                data: res.user_info.id
              });
              Taro.setStorage({
                key: "code",
                data: res.user_info.area_code
              });
              Taro.switchTab({
                url: "/pages/index/index"
              });
            }
          });
        } else {
          console.log("登录失败！" + res.msg);
        }
      }
    });
  };

  const getPhoneNumber = e => {
    getLoginPhoneApi({
      encrypted_data: e.detail.encryptedData,
      encrypted_iv: e.detail.iv,
      phone_token: Taro.getStorageSync("phone_token")
    }).then(res => {
      if (res.res === 0) {
        Taro.setStorage({
          key: "access_token",
          data: res.access_token
        });
        Taro.setStorage({
          key: "user_id",
          data: res.user_info.id
        });
        Taro.switchTab({
          url: "/pages/index/index"
        });
      } else {
        Taro.atMessage({
          message: res.msg,
          type: "warning"
        });
      }
    });
  };

  return (
    <View className="index-wrap">
      <View className="logo">
        <Image src="https://chenyoukj.cn/static/logo.jpg" />
        <View className="tip">
          <Text style={{ color: "red" }}>*</Text>
          本程序面向蚁情监测项目施工运维人员，请先联系蚁情监测项目管理方添加用户手机号作为登录身份凭证。
        </View>
      </View>

      <View className="wrap">
        {type === 1 ? (
          <AtButton
            type="primary"
            size="mini"
            openType="getUserInfo"
            onGetUserInfo={getUserInfo}
            onClick={fn}
          >
            立即使用
          </AtButton>
        ) : (
          <AtButton
            className="button"
            openType="getPhoneNumber"
            type="primary"
            onGetPhoneNumber={getPhoneNumber}
          >
            微信账号直接登录
          </AtButton>
        )}
        <View className="copyright">Copyright@2021 Chenyoukeji</View>
        <View>All Right Reserved</View>
      </View>
      <AtMessage />
    </View>
  );
};

export default Welcome;
